<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- three.js library -->
<script src='bulid/three.js'></script>
<script src="bulid/stats.js"></script>
<!-- ar.js -->
<script src="bulid/ar.js"></script>
<script src="bulid/MTLLoader.js"></script>
<script src="bulid/OBJLoader.js"></script>

<style>
</style>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;-webkit-transform:translate3d(0,0,0);'>
    <div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
         
        <div id="Stats-output">
        </div>
      <!--  <a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - three.js camera transform
        <br />
        Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a> -->
    </div>
    <script>
        var obj;
        //fps监测
        var stats = initStats();

        //fps状态
        function initStats() {
            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }

        // init renderer
        var renderer = new THREE.WebGLRenderer({
            antialias: true,                                	//开启抗锯齿
            alpha: true                                      	//开启背景透明
        });
        renderer.setClearColor(new THREE.Color('lightgrey'), 0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.domElement.style.position = 'absolute';
        renderer.domElement.style.top = '0px';
        renderer.domElement.style.left = '0px';
        document.body.appendChild(renderer.domElement);

        // array of functions for the rendering loop 呈现循环的函数数组
        var onRenderFcts = [];

        // 初始化场景和摄像机
        var scene = new THREE.Scene();
        var light = new THREE.DirectionalLight(0xffffff, 1.0);

        //位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不同
        //light.position.set(0,1,0.5 ).normalize();
        light.position.set(0, 30, 40);
        light.castShadow = true; // 启用阴影选项
        scene.add(light);

        //环境光设置
        var ambilight = new THREE.AmbientLight(0xffffff, 0.2);
        scene.add(ambilight);

        // 初始化摄像机位置(0，0，0)
        camera = new THREE.Camera();
        scene.add(camera);

        // handle arToolkitSource
        var arToolkitSource = new THREEx.ArToolkitSource({})
        arToolkitSource.init(function onReady() {
            onResize()
        })

        // handle resize
        window.addEventListener('resize', function () {
            onResize()
        })
        function onResize() {
            arToolkitSource.onResize()
            arToolkitSource.copySizeTo(renderer.domElement)
            if (arToolkitContext.arController !== null) {
                arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
            }
        }


        //initialize arToolkitContext

        // create atToolkitContext
        var arToolkitContext = new THREEx.ArToolkitContext({
            cameraParametersUrl: 'data/camera_para.dat',
            detectionMode: 'mono',
        })

        // initialize it
        arToolkitContext.init(function onCompleted() {
            // copy projection matrix to camera
            camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
        })

        // update artoolkit on every frame
        onRenderFcts.push(function () {
            if (arToolkitSource.ready === false) return

            arToolkitContext.update(arToolkitSource.domElement)

            // update scene.visible if the marker is seen
            scene.visible = camera.visible

        })
        // init controls for camera
        var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
            type: 'pattern',
            patternUrl: 'arcode/marker89.td',
            // patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
            // as we controls the camera, set changeMatrixMode: 'cameraTransformMatrix'
            changeMatrixMode: 'cameraTransformMatrix'
        })
        scene.visible = false;
        //    scene.visible = false;

        onRenderFcts.push(function (delta) {
            //            if(obj)
            //			{
            //			    obj.rotation.y=+1;
            //			}
        });


        //render the whole thing on the page

        // render the scene
        onRenderFcts.push(function () {
            renderer.render(scene, camera);
        });

        // run the rendering loop
        var lastTimeMsec = null
        requestAnimationFrame(function animate(nowMsec) {
            // keep looping
            requestAnimationFrame(animate);
            //        stats.update();
            // measure time
            lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60
            var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
            lastTimeMsec = nowMsec
            // call each update function
            onRenderFcts.forEach(
                function (onRenderFct) {
                    onRenderFct(deltaMsec / 1000, nowMsec / 1000)
                })
        })


        var onProgress = function (xhr) {

            if (xhr.lengthComputable) {

                var percentComplete = xhr.loaded / xhr.total * 100;

                console.log(Math.round(percentComplete, 2) + '% downloaded');

            }

        };



        var onError = function (xhr) { };

        var mtlLoader = new THREE.MTLLoader();

        mtlLoader.setPath('obj/');

        mtlLoader.load('jj.mtl', function (materials) {

            materials.preload();

            var objLoader = new THREE.OBJLoader();

            objLoader.setMaterials(materials);

            objLoader.setPath('obj/');

            objLoader.load('jj.obj', function (object) {

                obj = object;
                scene.add(object);
                object.position.set(0, 0, 0);
                object.scale.set(0.001, 0.001, 0.001);
                var axes = new THREE.AxisHelper(10);
                scene.add(axes);
            }, onProgress, onError);

        });


    </script>
</body>